<template>
  <div style="width: 100%;height: 100%;overflow: hidden;" v-loading="loading" element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="video-container">
      <!-- <HLSPlayer ref="hlsPlayer" :src="hlsSrc" :autoplay="true" /> -->
      <FLVPlayer :src="flvSrc" :autoplay="true" />
    </div>

    <!-- 添加电池包流程检测div -->
    <div class="battery-process-container">
      <div v-for="item in stepList" :key="item.id">
        <transition name="process-animation" @enter="animationState.enter = true"
          @after-enter="animationState.enter = false" @leave="animationState.exit = true">
          <div class="process-box" 
          :class="{
            'enter-active': animationState.enter,
            'exit-active': item.isCompleted
          }">
            <div class="process-title">{{ item.text }}</div>
            <div class="process-steps">
              <div v-for="step in item.stepList" :key="step.step" class="step-item"
                :class="{ completed: step.completed }">
                <div class="step-number">{{ step.step }}</div>
                <div class="step-line"></div>
                <div class="step-text">{{ step.text }}</div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted, onBeforeMount, onBeforeUnmount, onUnmounted } from 'vue'
import HLSPlayer from '@/components/HLSPlayer/index.vue';
import FLVPlayer from '@/components/FLVPlayer/index.vue'
const iframeUrl = import.meta.env.VITE_APP_VIDEO_PLAYER
const loading = ref(true)
const isListenerAdded = ref(false)
let iframeDom = null
const ws = ref(null);
// const flvSrc = ref("http://110.42.222.175:8080/live/demo.live.flv");
const flvSrc = ref("http://110.42.222.175:8080/live/test3.live.flv");
const hlsSrc = ref("http://110.42.222.175:8080/live/demo/hls.m3u8");
// const hlsSrc = ref("http://110.42.222.175:8080/live/test.live.flv");
// http://110.42.222.175:8080/live/test.live.flv
// const hlsSrc = ref("http://tlc.gzvst.top/hls/test2/index.m3u8");
const steps1 = ref([
  { id: 1, text: "激光焊点检查", completed: false },
  { id: 2, text: "转接板背面检查", completed: false },
  { id: 3, text: "电池组取出", completed: false },
  { id: 4, text: "点胶机治具装配", completed: false },
  { id: 5, text: "启动按钮确认", completed: false },
  { id: 6, text: "点胶完成取出", completed: false },
  { id: 7, text: "入壳投入治具", completed: false }
]);

const steps2 = ref([
  { id: 1, text: "激光焊点检查", completed: false },
  { id: 2, text: "转接板背面检查", completed: false },
  { id: 3, text: "电池组取出", completed: false },
  { id: 4, text: "点胶机治具装配", completed: false },
  { id: 5, text: "启动按钮确认", completed: false },
  { id: 6, text: "点胶完成取出", completed: false },
  { id: 7, text: "入壳投入治具", completed: false }
]);
// {
//   id:1,// 唯一标识生成
//   text: '步骤名称', // 零件名称
//   isError: false, // 是否异常
//   isCompleted: false, // 是否完成
// stepList: [
//     { step: 1, text: "激光焊点检查", completed: false },
//     { step: 2, text: "转接板背面检查", completed: false },
//     { step: 3, text: "电池组取出", completed: false },
//     { step: 4, text: "点胶机治具装配", completed: false },
//     { step: 5, text: "启动按钮确认", completed: false },
//     { step: 6, text: "点胶完成取出", completed: false },
//     { step: 7, text: "入壳投入治具", completed: false }
//   ]
// }
// 修改stepList为只保留当前展示的零件
// const stepList = ref([
//   {
//     id: 1,
//     text: '零件 202511030001',
//     isError: false,
//     isCompleted: false,
//     steps: [
//       { id: 1, text: "激光焊点检查", completed: false },
//       { id: 2, text: "转接板背面检查", completed: false },
//       { id: 3, text: "电池组取出", completed: false },
//       { id: 4, text: "点胶机治具装配", completed: false },
//       { id: 5, text: "启动按钮确认", completed: false },
//       { id: 6, text: "点胶完成取出", completed: false },
//       { id: 7, text: "入壳投入治具", completed: false }
//     ]
//   },
  
// ]);
const stepList = ref([]);
if (typeof window !== 'undefined' && window.WebSocket) {
  if (ws.value?.readyState === WebSocket.OPEN) {
    console.log('WebSocket 连接已建立，无需重复连接');
  } else {
    // 在浏览器环境中使用 WebSocket
    // // 创建 WebSocket 实例
    let url = import.meta.env.VITE_APP_SOCKET_API;
    ws.value = new WebSocket(`ws://${url}`);

    // // 监听 WebSocket 连接打开事件
    ws.value.onopen = function (event) {
      console.log('WebSocket 连接已打开');
    };
    // 其他 WebSocket 相关操作

    // // 监听 WebSocket 接收消息事件
    ws.value.onmessage = function (event) {
      console.log('接收到消息：', JSON.parse(event.data));
      let data = JSON.parse(event.data);
      // stepList.value = [];
      // if (data.type === "part_update") {
      //   if (data.part.isCompleted) {
      //     // 触发离场动画
      //     animationState.value.exit = true;
      //     // 延迟后添加新零件
      //     stepList.value = [];
      //     animationState.value = {
      //       enter: true,
      //       exit: false
      //     };
      //   } else {
      //     stepList.value.push(data.part);
      //   }
      // }
      if (data.frame_data.active_processes.length > 0) {
        // // 触发离场动画
        // animationState.value.exit = true;
        // // 延迟后添加新零件
        // stepList.value = [];
        // animationState.value = {
        //   enter: true,
        //   exit: false
        // };
        stepList.value = data.frame_data.active_processes
      } else {
         stepList.value = [];
        // stepList.value.push(data.frame_data.frame_data);
      }
    };
  }
} else {
  console.error('WebSocket is not available in this environment');
}
// 添加动画状态
const animationState = ref({
  enter: true,
  exit: false
});

// WebSocket模拟
const simulateWebSocket = () => {
  let currentStepIndex = 0;
  let itemCounter = 1;

  const processNextStep = () => {
    if (currentStepIndex < stepList.value[0].steps.length) {
      // 更新当前步骤状态
      stepList.value[0].steps[currentStepIndex].completed = true;
      currentStepIndex++;

      // 检查是否所有步骤完成
      if (currentStepIndex === stepList.value[0].steps.length) {
        stepList.value[0].isCompleted = true;

        // 触发离场动画
        animationState.value.exit = true;

        // 延迟后添加新零件
        setTimeout(() => {
          // 移除当前零件
          stepList.value = [];

          // 短暂延迟后添加新零件
          setTimeout(() => {
            itemCounter++;
            stepList.value.push({
              id: itemCounter,
              text: `零件 20251103${itemCounter.toString().padStart(4, '0')}`,
              isError: false,
              isCompleted: false,
              steps: [
                { id: 1, text: "激光焊点检查", completed: false },
                { id: 2, text: "转接板背面检查", completed: false },
                { id: 3, text: "电池组取出", completed: false },
                { id: 4, text: "点胶机治具装配", completed: false },
                { id: 5, text: "启动按钮确认", completed: false },
                { id: 6, text: "点胶完成取出", completed: false },
                { id: 7, text: "入壳投入治具", completed: false }
              ]
            });

            // 重置动画状态
            animationState.value = {
              enter: true,
              exit: false
            };

            // 重置步骤索引
            currentStepIndex = 0;

            // 继续处理新零件的步骤
            setTimeout(processNextStep, 1000);
          }, 500);
        }, 1000);
        return;
      }
    }

    // 继续处理下一个步骤
    setTimeout(processNextStep, 3000);
  };

  // 开始处理
  processNextStep();
};
//模拟
onMounted(() => {
  loading.value = false;
  // simulateWebSocket();
  // // 第一个流程的步骤自动完成
  // let currentStep = 0;
  // const stepInterval = setInterval(() => {
  //   if (currentStep < steps1.value.length) {
  //     steps1.value[currentStep].completed = true;
  //     currentStep++;
  //   } else {
  //     clearInterval(stepInterval);
  //     activeBox.value = 2; // 切换到第二个流程

  //     // 第二个流程的步骤自动完成
  //     let currentStep2 = 0;
  //     const stepInterval2 = setInterval(() => {
  //       if (currentStep2 < steps2.value.length) {
  //         steps2.value[currentStep2].completed = true;
  //         currentStep2++;
  //       } else {
  //         clearInterval(stepInterval2);
  //       }
  //     }, 5000);
  //   }
  // }, 5000);
})



onUnmounted(() => {

})
</script>
<style scoped lang="scss">
.video-container {
  width: 100%;
  height: 100vh;
}

/* 新增电池包流程样式 */
.battery-process-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50px;
  z-index: 10;
  display: flex;
  gap: 10px;
}

.process-box {
  width: 275px;
  height: auto;
  background: rgba(0, 92, 161, 0.92);
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 15px;
  margin-bottom: 20px;
}

.second-box {
  margin-left: 24px;
}

.process-title {
  font-size: 24px;
  color: #FFFFFF;
  margin-bottom: 10px;
}

.process-time {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.step-item {
  display: flex;
  align-items: center;
  position: relative;

}

// 添加动画样式
.process-box {
  transition: all 0.5s ease;
  transform-origin: top center;
}

.process-box.enter-active {
  animation: enterAnimation 0.5s ease-out;
}

.process-box.exit-active {
  animation-name: backOutLeft;
  animation-duration: 3s;
  animation-fill-mode: both;
}

@keyframes enterAnimation {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes exitAnimation {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}

@keyframes backOutLeft {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  20% {
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}

.step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  margin-right: 10px;
}

.step-line {
  position: absolute;
  left: 11px;
  top: 24px;
  width: 2px;
  height: 30px;
  background: rgba(255, 255, 255, 0.2);
}

.step-item:last-child .step-line {
  display: none;
}

.step-text {
  font-size: 16px;
  color: white;
  margin-left: 14px;
}

/* 已完成步骤的样式 */
.step-item.completed .step-number {
  background: #4CAF50;
}

.step-item.completed .step-number::after {
  content: "✓";
  position: absolute;
  color: #FFFFFF;
  font-size: 16px;
}

.step-item.completed .step-number {
  color: transparent;
  /* 隐藏数字但保留空间 */
}
</style>



